<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list">
        <div class="list_top">
            <div class="list_top_img">
                <van-image radius="5" :src="data?.productImages ? data?.productImages+ '?x-oss-process=image/resize,w_300' :''" />
                <img src="" alt="">
                <div class="list_top_img_tag" v-if="data?.hmMechanismsList[1]?.cooperationMode">多机制</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.styleName }}</div>
                    <div :class="{ tag: true, tag_lv: type === '如期还品', tag_huang: type === '超期还品' }">{{ type ===
                        '如期还品' ? '已归还' : '超期还品' }}</div>
                </div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'">
                            ￥<span>{{ data?.hmMechanismsList[0].price }}</span>
                        </div>
                        <div v-else>
                            ￥<span>{{ data?.hmMechanismsList[0].costPrice }}</span>
                        </div>
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'" class="commission">
                            <span class="fonts">佣</span>
                            <span class="numbers">
                                {{ data?.hmMechanismsList[0].commission }}%
                            </span>
                        </div>
                    </div>
                    <div class="money_right">
                        {{ data?.hmMechanismsList[0].liveStreamingMechanism }}
                    </div>
                </div>
                <div class="list_top_right_times">
                    <div>到期时间：{{ data?.cycleTime || '' }}</div>
                    <div>还品时间：{{ data?.putTime || '' }}</div>
                </div>
                <div class="list_top_right_return_product">
                    <div class="title">还品数</div>
                    <div class="number">
                        <div class="color">{{ data?.putNum || 0 }}</div>
                        <div class="total">/{{ data?.outNum || 0 }}件</div>
                    </div>
                    <van-image v-if="data?.noPutStatus == 1 && data?.putStatus == 1" :src="icon_tanhao"
                        @click.stop="toDetails" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
defineProps({ data: { type: Object, default: () => { } }, type: { type: String, default: '' } })
const emit = defineEmits(['toDetails'])
const icon_tanhao = new URL("@/assets/operation/icon_tanhao.png", import.meta.url).href;
const toDetails = () => {
    emit('toDetails')
}
</script>

<style lang="less" scoped>
@import url(@/views/operation/operationHomeList/components/style/index.less);
</style>